<template>
    <div
        class="Play"
        :class="{ animation: PlayPage }"
        :name="sliderValue_monitor"
    >
        <!-- 导航栏 -->
        <div class="navBar">
            <div class="return">
                <van-icon
                    name="arrow-left"
                    @click="Play_TB_Fn({ name: routerName, tf: false })"
                />
            </div>
            <div class="more">
                <img src="../assets/T1-solid-更多.png" alt="" />
            </div>
        </div>

        <!-- 歌名 -->
        <p class="songTitle">{{ songTitle }}</p>
        <!-- 歌手 -->
        <p class="singer">{{ singer }}</p>

        <!-- 关键区 -->
        <div class="crux" :class="{ switch: switchTF }" @click="changeSwitchTF">
            <div class="cover_box">
                <!-- 封面 -->
                <div
                    class="cover"
                    :style="{ backgroundImage: 'url(' + cover + ')' }"
                ></div>
                <div class="diTu"></div>
                <!-- 唱片 -->
                <div class="record" :class="{ go: playSuspend }"></div>
            </div>

            <!-- 环形进度条 -->
            <div class="circle_box">
                <div class="circle">
                    <van-circle
                        v-model="currentRate"
                        :rate="rate"
                        :speed="100"
                        :color="gradientColor"
                        :layer-color="'#1b1d4b'"
                        size="260px"
                    />
                </div>

                <!-- 音频时间 -->
                <div class="time time1">{{ currentTimeText }}</div>
                <div class="time time2">{{ durationText }}</div>
            </div>
        </div>

        <!-- 歌词显示盒 -->
        <div
            class="lyric_box"
            :class="{ switch: switchTF, noTime: lyricYesNo }"
            @click="changeSwitchTF"
        >
            <!-- 歌词移动盒 -->
            <div
                class="lyric"
                :style="{ top: lyric_Index * -28 + 'px' }"
                :class="{ switch: switchTF }"
            >
                <!-- 歌词 -->
                <div
                    class="lyric_item"
                    v-for="(item, index) in lyric"
                    :key="index"
                    :class="{ active: index === lyric_Index }"
                >
                    {{ item.text }}
                </div>
            </div>
        </div>

        <!-- 功能盒 -->
        <div class="function_box">
            <!-- 上盒 -->
            <div class="function_top">
                <!-- 音频滑块 -->
                <van-slider
                    v-model="sliderValue"
                    @change="onChangeSlider"
                    @drag-start="Sliding_TF(true)"
                    @drag-end="Sliding_TF(false)"
                    bar-height="5px"
                    active-color="linear-gradient(to right, #bd08f4, #43db8a)"
                    inactive-color="#1b1d4b"
                >
                    <!-- 滑块按钮 -->
                    <template #button>
                        <div class="slider_button"><div></div></div>
                    </template>
                </van-slider>
            </div>

            <!-- 中盒 -->
            <div class="function_center">
                <!-- 上一首 -->
                <div class="last" @click="songLastNext(false)">
                    <img src="../assets/ic_previous.png" alt="" />
                </div>
                <!-- 播放暂停 -->
                <div class="play" @click="playSuspend_Switch">
                    <img :src="playSuspend_img" alt="" />
                </div>
                <!-- 下一首 -->
                <div class="next" @click="songLastNext(true)">
                    <img src="../assets/ic_next.png" alt="" />
                </div>
            </div>

            <!-- 下盒 -->
            <div class="function_bottom">
                <!-- 模式选择 -->
                <div class="pattern" @click="pattern_Fn">
                    <img :src="pattern_img" alt="" />
                </div>
                <!-- 收藏 -->
                <div class="collection" @click="collectionSong_Fn">
                    <img
                        :src="
                            require(`../assets/${
                                collectionSong ? '爱心 _实心' : '爱心'
                            }.png`)
                        "
                        alt=""
                    />
                </div>
                <!-- 下载 -->
                <div class="download">
                    <img src="../assets/ic_download.png" alt="" />
                </div>
                <!-- 分享 -->
                <div class="share" @click="showShare = true">
                    <img src="../assets/ic_share_round.png" alt="" />
                </div>
            </div>
        </div>

        <!-- 分享组件 -->
        <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
        />
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';

import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: controlAudioMapState,
    mapMutations: controlAudioMapMutations,
    mapGetters: controlAudioMapGetters,
    mapActions: controlAudioMapActions
} = createNamespacedHelpers('controlAudio');

export default {
    name: "Play",
    props: {
        // 当前播放时间和音频总时间的百分比
        percent: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            // 环形进度条
            currentRate: 0,
            gradientColor: { '0%': '#ae0ee0', '22%': '#3e3afe', },

            // 歌词大显示开关
            switchTF: false,

            // 模拟双击 
            // 点击时间
            startTime: 0,
            // 点击次数
            clickid: 1,
            // 间隔定时器
            timer: null,

            // 分享组件 显示开关
            showShare: false,
            // 分享组件 数据
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],


            // 滑块进度
            sliderValue: 0,
            // 是否正在滑动
            isMove: false,
            // 节流 定时器
            timer: null,

            songIds: []
        };
    },

    computed: {
        // 监听当前路由名字
        routerName() {
            return this.$route.name;
        },

        // 环形进度条
        rate() { return this.percent * 33 },

        // 歌曲 收藏状态 f未收藏，t已收藏
        collectionSong() {

            let obj = this.songIds.find((v, i) => {

                if (v == this.id) {
                    return true
                } else { return false; }
            });
            console.log('collectionSong ==> 收藏歌曲 ', obj);

            if (obj) {
                return true
            } else { return false }
        },

        // 监听时间比例，改变滑块进度
        sliderValue_monitor() {
            // 正在滑动 就不监听改变
            if (!this.isMove) { this.sliderValue = this.percent * 100; }
            return "Play";
        },

        // Play组件显示开关
        ...mapState(['PlayPage']),

        // 音频的数据信息
        ...controlAudioMapState([
            'id',
            'playSuspend',
            'cover',
            'songTitle',
            'singer',
            'durationText',
            'currentTimeText',
            'lyric',
            'lyric_Index',
            'lyricYesNo',
            'pattern',
            'songsData',
            'songIndex']),

        // 监听播放暂停 切换img
        playSuspend_img() {
            if (this.playSuspend) { return require('../assets/播放.png') }
            else { return require('../assets/暂停.png') }
        },
        //监听播放模式 切换img
        pattern_img() {
            if (this.pattern === 0) {
                return require('../assets/顺序播放.png')
            }
            else if (this.pattern === 1) {
                return require('../assets/随机播放.png')
            }
            else if (this.pattern === 2) {
                return require('../assets/单曲循环.png')
            }
        },
    },
    methods: {

        // 收藏歌曲
        collectionSong_Fn() {
            let uid = localStorage.getItem('uid');
            if (!uid) { this.$router.push({ name: 'LogOn' }); }

            // 获取会话中的 收藏歌手列表
            this.songIds = sessionStorage.getItem("songIds");
            if (this.songIds) {
                this.songIds = JSON.parse(this.songIds);
            } else {
                this.songIds = [];
            }



            if (this.collectionSong) {
                Dialog.confirm({
                    title: '确定取消收藏该歌曲？',
                })
                    .then(() => {
                        // 删除歌曲id
                        this.songIds = this.songIds.filter((v, i) => {
                            if (this.id == v) {
                                return false
                            } else {
                                return true;
                            }
                        });

                        sessionStorage.setItem(
                            "songIds",
                            JSON.stringify(this.songIds)
                        );
                        Toast.success({
                            message: '取消收藏\n成功！',
                            forbidClick: true,
                        });
                    })
                    .catch(() => { });
            }
            else {
                this.songIds.push(this.id);

                sessionStorage.setItem(
                    "songIds",
                    JSON.stringify(this.songIds)
                );
                Toast.success({
                    message: '收藏成功！',
                    forbidClick: true,
                });
            };
        },


        // 切换 歌词大显示开关
        changeSwitchTF() {
            // 模拟双击事件

            // 触发单击事件
            if (this.clickid == 1) {
                this.startTime = new Date().getTime();
                this.clickid++;
                this.timer = setTimeout(() => {
                    this.clickid = 1;
                }, 350)
            }

            // 触发双击事件
            if (this.clickid == 2) {
                this.clickid++;
            } else {
                var endTime = new Date().getTime();
                if ((endTime - this.startTime) < 350) {
                    this.clickid = 1;
                    this.switchTF = !this.switchTF;
                }
            }
        },

        // 音频滑块 变动触发
        onChangeSlider(value) { this.$emit('slide', { value: value }); },
        // 是否正在滑动
        Sliding_TF(tf) { this.isMove = tf; },


        ...controlAudioMapMutations(['playSuspend_Switch', 'changeStateProperty', 'SelectPlay']),


        // 切换播放模式
        pattern_Fn() {
            let num = this.pattern + 1;
            if (num > 2) {
                num = 0;
            }
            this.changeStateProperty({ key: 'pattern', value: num });
        },

        // f上一首 t下一首
        songLastNext(tf) {
            this.$emit('LastNext');

            // 随机播放
            if (this.pattern === 1) {
                let index = this.randomIndex(this.songIndex);
                console.log("🚀🚀🚀🚀🚀 ==> songLastNext ==> index", index);

                this.SelectPlay(index);
            }
            //顺序播放 单曲循环
            else {
                // 上一首
                if (tf) {
                    let index = this.songIndex + 1;
                    if (this.songIndex === this.songsData.length - 1) {
                        index = 0;
                    }
                    console.log("🚀 ==> audioEnded ==> index", index);
                    this.SelectPlay(index);
                }
                // 下一首
                else {
                    let index = this.songIndex - 1;
                    if (this.songIndex === 0) {
                        index = this.songsData.length - 1;
                    }
                    console.log("🚀 ==> audioEnded ==> index", index);
                    this.SelectPlay(index);
                }

            }
        },
        // 获取一个随机下标
        randomIndex(index) {
            // 生成一个随机数
            let num = Math.floor(Math.random() * this.songsData.length);

            // 与当前播放下标 相同就进行递归
            if (num === index) { return this.randomIndex(index); }
            else { return num };
        },

        // 弹出play
        ...mapMutations(['Play_TB_Fn']),

        // 分享提示
        onSelect(option) { Toast(option.name); },
    },

    created() {
    },
}
</script>

<style lang="less" scoped>
@keyframes abc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.Play {
    position: fixed;
    right: 0;
    bottom: 50px;
    top: 0;
    left: 0;
    background-color: #0b0b2f;
    transform: rotateZ(90deg);
    transform-origin: 100% 100%;
    transition: transform 1.5s linear;

    // 导航栏
    .navBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;

        // 返回
        .return {
            margin-left: 15px;
            font-size: 30px;
            color: #6b64af;
        }
        // 更多
        .more {
            opacity: 0.9;
            img {
                width: 50%;
                height: auto;
                transform: translateX(15px) rotate(90deg);
            }
        }
    }

    // 歌名
    .songTitle {
        color: #fff;
        text-align: center;
        margin: 25px auto 10px;
        max-width: 70%;
        font-size: 26px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    // 歌手名
    .singer {
        color: #6b64af;
        text-align: center;
        max-width: 50%;
        margin: 0 auto 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    // 关键区
    .crux {
        &.switch {
            filter: blur(10px);
        }

        transition: filter 2s;
        position: relative;
        padding: 0 35px;
        .cover_box {
            width: 68%;
            position: relative;

            // 封面
            .cover {
                width: 100%;
                height: 0;
                padding-bottom: 100%;
                border-radius: 5px;
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
            }
            .diTu {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                background-image: url('../assets/singer.png');
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                z-index: -1;
            }

            // 唱片
            .record {
                position: absolute;

                top: 7%;
                left: 10%;
                transition: left 2s ease-in-out 0.5s;
                width: 86%;
                height: 0;
                padding-bottom: 86%;
                z-index: -2;
                border-radius: 50%;
                animation: abc 5s linear infinite forwards;
                animation-play-state: paused;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: contain;
                background-image: radial-gradient(
                        rgba(0, 0, 0),
                        rgba(38, 3, 252, 0.2)
                    ),
                    url('../assets/Vrecord.png');
            }

            .record.go {
                left: 40%;
                animation-play-state: running;
            }
        }

        // 环形进度条
        .circle_box {
            position: absolute;
            top: -27px;

            right: 0;
            display: flex;
            overflow: hidden;
            width: 27%;
            // background-color: #fff;

            .circle {
                transform: translateX(-77%) rotate(30deg);
            }

            // 音频时间
            .time {
                color: #6b64af;
                position: absolute;
            }

            .time1 {
                left: 35%;
                top: 5%;
            }
            .time2 {
                left: 35%;
                bottom: 5%;
            }
        }
    }

    //歌词显示盒
    .lyric_box {
        margin: 30px 35px 15px;
        height: 49px;
        left: 0;
        right: 0;
        text-align: center;
        position: absolute;
        overflow: hidden;
        transition: height 2s, transform 2s;

        &.switch {
            height: 290px;
            transform: translateY(-250px);

            &::after {
                content: '';
                position: absolute;
                background-image: linear-gradient(
                    0deg,
                    #0b0b2f,
                    rgba(11, 11, 47, 0.1)
                );
                height: 25px;
                bottom: -1px;
                right: 0;
                left: 0;
            }
        }

        // 歌词 没有 时间标记
        &.noTime {
            overflow: scroll;
            &::after {
                height: 0 !important;
            }
        }

        //歌词移动盒
        .lyric {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding-top: 10px;
            padding-bottom: 5px;
            transition: top 1s, padding 2s;

            &.switch {
                padding-top: 140px;
            }
            // 歌词
            .lyric_item {
                font-size: 13px;
                margin-bottom: 15px;
                transition: all 1s;
                color: rgba(255, 255, 255);
            }
            // 播放到的歌词
            .active {
                font-weight: 600;
                font-size: 16px;
                background-image: linear-gradient(90deg, #2b97fc, #43db8a);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
        }
    }

    // 功能盒
    .function_box {
        margin: 105px 20px;

        // 上盒
        .function_top {
            // 滑块按钮
            .slider_button {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0px 0px 8px 2px rgba(67, 219, 138, 0.9);
                div {
                    width: 6.5px;
                    height: 6.5px;
                    border-radius: 50%;
                    background-color: #43db8a;
                }
            }
            /deep/.van-slider::before {
                top: -2px;
                bottom: -2px;
            }
        }
        // 中盒
        .function_center {
            margin: 0 15px;
            padding-top: 15px;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            div {
                width: 26px;
                height: auto;
                opacity: 0.7;
            }

            div.play {
                width: 50px;
                opacity: 1;
            }
        }
        // 下盒
        .function_bottom {
            margin: 0 15px;
            margin-top: 24px;
            display: flex;
            justify-content: space-between;

            div {
                width: 26px;
                height: auto;
                opacity: 0.7;
            }
        }
    }
}

/deep/ .van-share-sheet__options {
    padding-right: 8px;
    justify-content: space-around;
}
.animation {
    transform: rotateZ(0deg);
}
</style>